Docs Only Mode

How to remove the /docs path

How to remove the /docs path from the URL. Official Docs

We will be editing the file docusaurus.config.js for this entire documentation. Or in my case docusaurus.config.ts.

Lets Change the directory to the root of the website.

cd /var/websites/"HomeLab Docs"/

note

Your directory will likely be different

Modifying the docusaurus.config.ts File

Lets open the file with Nano

nano docusaurus.config.ts

note

I am using typescript but you may be using javascript make sure you use the correct file extension or you will create a new file.

Scroll down until you see this snippet of code

  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: './sidebars.js',
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
        },
        theme: {
          customCss: './src/css/custom.css',
        },
      }),
    ],
  ],

Add routeBasePath: '/', // Serve the docs at the site's root above sidebarPath: './sidebars.js',

My finished changes to docusaurus.config.ts file

It should look like this

  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          routeBasePath: '/', // Serve the docs at the site's root
          sidebarPath: './sidebars.js',
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
        },
        theme: {
          customCss: './src/css/custom.css',
        },
      }),
    ],
  ],

Now scroll down some more and find

      footer: {
        style: 'dark',
        links: [
          {
            title: 'Docs',
            items: [
              {
                label: 'Documented Tutorial',
                to: '/docs/category/documented-tutorials-',
              },
              {
                label: 'Examples',
                to: '/docs/category/examples-',
              },
              {
                label: 'Jellyfin Extras',
                to: '/docs/category/jellyfin-extras-',
              },
              {
                label: 'Arr Self-Hosting',
                to: '/docs/category/arr-self-hosting',
              },
              {
                label: 'Videos',
                to: '/docs/category/videos-tutorials',
              },
            ],

Change '/docs/intro', to '/', for every link

It should look like this

      footer: {
        style: 'dark',
        links: [
          {
            title: 'Docs',
            items: [
              {
                label: 'Documented Tutorial',
                to: '/category/documented-tutorials-',
              },
              {
                label: 'Examples',
                to: '/category/examples-',
              },
              {
                label: 'Jellyfin Extras',
                to: '/category/jellyfin-extras-',
              },
              {
                label: 'Arr Self-Hosting',
                to: '/category/arr-self-hosting',
              },
              {
                label: 'Videos',
                to: '/category/videos-tutorials',
              },
            ],

Now save and Exit

info

Save with CTRL+X

Rebuilding the website

Now rebuild the site

npm run build

Changing the default Landing Page

Now if you wanted to change your landing page to your own index.js, index.md, or a specific document

You will have to add

---
slug: /
---

To the file

For example if you wanted a visitor to land on https://docs.bankai-tech.com/Docker/Nextcloud/Installation when typing https://docs.bankai-tech.com in the browser

You would have to add the slug: / shown in the example codeblock above to the top of the file hosting that page. In my case its in /docs/Docker/Nextcloud/Installation.md

If you build the file after adding the slug you will recieve and error

This is because the default homepage is routed to / also.

To fix this we need to either delete or rename the file src/pages/index.js or for typscript users src/pages/index.tsx

note

I renamed src/pages/index.tsx to src/pages/index.tsx.bak
Just incase I wanted to revert these changes in the future

You can now rebuild the website with no errors

npm run build